<template>
  <div>
    <el-card class="card">
      <div class="header">
        <span>销售额类别占比</span>
        <el-radio-group v-model="radio" size="mini">
          <el-radio-button label="全部渠道"></el-radio-button>
          <el-radio-button label="线上"></el-radio-button>
          <el-radio-button label="门店"></el-radio-button>
        </el-radio-group>
      </div>
    <div class="charts" ref="charts"></div>
    </el-card>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    data() {
      return {
        radio: '全部渠道'
      }
    },
    mounted() {
      let mycharts = echarts.init(this.$refs.charts)
      mycharts.setOption({
        title:{
          text:'视频',
          subtext:1044,
          left:'center',
          top:'center'
        },
          tooltip: {
            trigger: 'item'
          },
         
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outsize'
            },
            labelLine: {
              show: true,
            },
            data: [{
                value: 1048,
                name: 'Searc'
              },
              {
                value: 735,
                name: 'Direct'
              },
              {
                value: 580,
                name: 'Email'
              },
              {
                value: 484,
                name: 'Union'
              },
              {
                value: 300,
                name: 'Video'
              },
            ]
          }]
      }),
      // 绑定鼠标事件
      mycharts.on('mouseover', function (params) {
        // 解构出鼠标移上去那条数据
          const {name,value} = params.data
          console.log(params);
          // 重新设置标题
          mycharts.setOption({
            title:{
              text:name,
              subtext:value
            }
          })
      });
  }
  }
</script>

<style scoped>
  .el-card__body {
    padding: 10px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }

  .charts {
    width: 100% ;
    height:300px;
  }
</style>
